<template>
    <div class="ec-app-container">
        <!-- 查询条件 -->
        <div class="filter-container">
            <el-form label-width="90px">
                <el-row :gutter="10">
                    <el-col :span="6">
                        <el-form-item label="视频标题：" >
                            <el-input v-model="listQuery.videoTitle" placeholder="视频标题"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" class="text-center">
                        <el-button type="primary" class="border-4C7FD7 color-4C7FD7" icon="el-icon-search" @click="searchList">查询</el-button>
                        <el-button class="border-4C7FD7 color-4C7FD7" @click="resetSearch">重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- table -->
        <div>
            <div class="mt-30">
                <el-row>
                    <el-col :span="12">
                        <el-button class="filter-item" type="primary" @click="searchListByReleaseStatus('')">全部</el-button>
                        <el-button class="filter-item" type="primary" @click="searchListByReleaseStatus(1)">待发布</el-button>
                        <el-button class="filter-item" type="primary" @click="searchListByReleaseStatus(0)">已发布</el-button>
                        <el-button class="filter-item" type="primary" @click="searchListByReleaseStatus(2)">已删除</el-button>
                    </el-col>
                    <el-col :span="12" class="text-right">
                        <el-button class="filter-item" type="primary" @click="showDialog('新增视频')">新增</el-button>
                    </el-col>
                </el-row>
            </div>
            <div class="mt-20">
                <el-table
                        v-loading="listLoading"
                        :data="list"
                        border
                        fit
                        highlight-current-row
                        @selection-change="handleSelectionChange"
                        style="width: 100%;">
                    <el-table-column
                            type="selection"
                            width="55"/>
                    <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.object.status === 1" type="text" size="mini" @click="releaseStatus(scope.row, 0, '发布视频')">发布</el-button>
                            <el-button v-else type="text" size="mini" @click="releaseStatus(scope.row, 1, '撤销视频')">撤销</el-button>
                            <el-button type="text" size="mini" @click="updateDialog(scope.row, '编辑视频')">编辑</el-button>
                            <el-button type="text" v-if="scope.row.object.status === 2"  size="mini" @click="releaseStatus(scope.row, 1, '还原视频')">还原</el-button>
                            <el-button type="text" v-else size="mini" @click="releaseStatus(scope.row, 2, '删除视频')">删除</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="视频封面" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.object.videoCover }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="视频标题" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.object.videoTitle }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="视频地址" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.object.videoUrl }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="播放次数" align="center">
                        <template slot-scope="scope">
                            <span>暂时没做</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建人" align="center">
                        <template slot-scope="scope">
                            <span>暂时没做</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.createTime }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="发布状态" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.object.status | releaseStatus }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="searchList" />
        </div>
        <!-- 新增修改 -->
        <el-dialog :visible.sync="dialogFormVisible" :title="message" width="450px">
            <el-form ref="objectForm" :model="object" :rules="objectRules" label-width="110px">
                <el-row>
                    <el-form-item label="视频封面：" prop="videoCover">
                        <el-input v-model="object.videoCover"/>
                    </el-form-item>
                    <el-form-item label="视频标题：" prop="videoTitle">
                        <el-input v-model="object.videoTitle"/>
                    </el-form-item>
                    <el-form-item label="视频描述：" prop="videoDesc">
                        <el-input v-model="object.videoDesc"/>
                    </el-form-item>
                    <el-form-item label="视频：" prop="videoUrl">
                        <el-input v-model="object.videoUrl"/>
                    </el-form-item>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="onCancel">取 消</el-button>
                <el-button type="primary" :loading="btnLoading" @click="onSubmit(message)">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
    import mixin from './rules/video.js' // 自定义验证规则
    export default {
        name: 'Project',
        components: {
            Pagination
        },
        mixins: [mixin],
        data() {
            return {
                message: '新增视频',
                listQuery: {
                    level: 'videoManagement',
                    videoTitle: '',
                    pageSize: 10,
                    pageNum: 1
                },
                object: {
                    'videoCover': '',
                    'videoTitle': '',
                    'videoDesc': '',
                    'videoUrl': '',
                    'status': 1,
                    'level1': '',
                    'level2': '',
                    'level': 'videoManagement'

                }
            }
        },
        created() {
            // 初始化
            this.searchList()
        },
        methods: {
            searchListByReleaseStatus (status) {
                this.listQuery.status = status
                this.listQuery.pageNum = 1
                this.searchList()
            }
        }
    }
</script>